<template>
	<div class="optional-box-select-content mt-20px">
		<!-- 列表模块 -->
		<div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="ad" label="广告方">
					<template #default="scope">
						<div class="flex-row-center pt-10px pb-10px">
							<div class="flex items-center">
								<img :src="scope.row.icon" class="w-24px h-24px rounded-50% mr-6px" />
								<span class="text-16px text-#000000">{{ scope.row.ad }}</span>
							</div>
							<div class="ml-30px flex items-center mt-6px">
								<p class="mr-6px">成单量:</p>
								<p class="mr-6px">
									{{ scope.row.orders }}
								</p>
								<p class="mr-6px">|</p>
								<p>
									{{ scope.row.percentage }}%
								</p>
							</div>
							<div class="ml-30px flex items-center mt-6px">
								<img src="/transaction/c2c/optional/time.svg">
								<p>{{ scope.row.orderTime }}</p>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="price" label="价格">
					<template #default="scope">
						<div class="flex items-center">
							<p class="text-bold text-16px text-#000">{{ scope.row.price }}</p>
							<p>CNY</p>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="account" label="数量/订单限额">
					<template #default="scope">
						<div>
							<p>{{ scope.row.account }}ETH
							</p>
							<p>
								{{ scope.row.min }} - {{ scope.row.max }}
							</p>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="payMethods" label="支付方式">
					<template #default="scope">
						<div>
							<div v-for="item in scope.row.payMethodsContents" class="flex items-center">
								<p :style="{ backgroundColor: item.color }" class="w-4px h-14px mr-10px"></p>
								<p>{{ item.name }}</p>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="require" label="交易" align="right">
					<template #default="scope">
						<div>
							<template v-if="props.payMethods == 'pay'">
								<el-button type="primary" color="#ECECF0" style="padding:26px 40px;color:#000000;"
									v-if="!scope.row.require" @click="unauthorized = true">
									不满足广告方要求
								</el-button>
								<el-button type="primary" color="#07B175" style="padding:26px 40px;color:#fff;" v-else
									@click="quickPayShow = true">
									购买ETH
								</el-button>
							</template>
							<template v-if="props.payMethods == 'sell'">
								<el-button type="primary" color="#ECECF0" style="padding:26px 40px;color:#000000;"
									v-if="!scope.row.require" @click="unauthorized = true">
									不满足广告方要求
								</el-button>
								<el-button type="primary" color="#F34E5F" style="padding:26px 40px;color:#fff;" v-else
									@click="quickSellShow = true">
									购买ETH
								</el-button>
							</template>
						</div>
					</template>

				</el-table-column>
			</el-table>
		</div>
		<!-- 分页模块 -->
		<div class="flex justify-center mt-20px">
			<el-pagination layout="prev, pager, next" :total="1000" />
		</div>
		<Unauthorized :show="unauthorized" @close="unauthorizedClose"></Unauthorized>
		<QuickPay :show="quickPayShow" @close="quickPayClose"></QuickPay>
		<QuickSell :show="quickSellShow" @close="quickSellClose"></QuickSell>
	</div>
</template>
<script lang="ts" setup>
import Unauthorized from './Unauthorized.vue';
import QuickPay from './QuickPay.vue';
import QuickSell from './QuickSell.vue';

interface IProps {
	payMethods: any;
}
const props = defineProps<IProps>();


const tableData = ref<any>([
	{
		icon: '/transaction/c2c/optional/avatar.svg',
		ad: '红星快速交易',
		orders: 236,
		percentage: 98.6,
		orderTime: '00:60',
		price: '263,303.39',
		account: 0.9999995,
		coin: 'ETH',
		min: '￥100000.00',
		max: '￥200000.00',
		payMethods: [1, 2, 3],
		require: false
	},
	{
		icon: '/transaction/c2c/optional/avatar.svg',
		ad: '红星快速交易',
		orders: 236,
		percentage: 98.6,
		orderTime: '00:60',
		price: '263,303.39',
		account: 0.9999995,
		coin: 'ETH',
		min: '￥100000.00',
		max: '￥200000.00',
		payMethods: [1, 2],
		require: true
	},
	{
		icon: '/transaction/c2c/optional/avatar.svg',
		ad: '红星快速交易',
		orders: 236,
		percentage: 98.6,
		orderTime: '00:60',
		price: '263,303.39',
		account: 0.9999995,
		coin: 'ETH',
		min: '￥100000.00',
		max: '￥200000.00',
		payMethods: [1, 2],
		require: false
	},
	{
		icon: '/transaction/c2c/optional/avatar.svg',
		ad: '红星快速交易',
		orders: 236,
		percentage: 98.6,
		orderTime: '00:60',
		price: '263,303.39',
		account: 0.9999995,
		coin: 'ETH',
		min: '￥100000.00',
		max: '￥200000.00',
		payMethods: [1, 2],
		require: false
	}
])

// 支付方式
const payMethods = [
	{
		id: 1,
		name: '支付宝',
		color: '#1187EE'
	},
	{
		id: 2,
		name: '微信',
		color: '#2DC100'
	},
	{
		id: 3,
		name: '银行借记卡',
		color: '#F6AC57'
	}
]

function addPayMethods() {
	tableData.value.forEach((item: any) => {
		item.payMethodsContents = []
		item.payMethods.forEach((pay: any) => {
			payMethods.forEach((payMethod: any) => {
				if (payMethod.id === pay) {
					item.payMethodsContents.push(payMethod)
				}
			})
		});
	});
}

addPayMethods();

// 控制未认证弹窗
const unauthorized = ref<boolean>(false);
const unauthorizedClose = (show: boolean) => {
	unauthorized.value = show;
};

// 控制购买弹窗
const quickPayShow = ref<boolean>(false);

const quickPayClose = (show: boolean) => {
	quickPayShow.value = show;
}

// 控制出售弹窗
const quickSellShow = ref<boolean>(false);

const quickSellClose = (show: boolean) => {
	quickSellShow.value = show;
}
</script>
<style lang="scss" scoped></style>
